import React,{ PureComponent } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { ListItem, ListInfo, LoadMore } from '../style';
import { actionCreators } from '../store';

class List extends PureComponent{

    render() {
        const { list, loadMoreList, page } = this.props;
        return (
            <div>
                {
                    list.map((item, index) => {
                        return (
                            <ListItem key={index}>
                                <img alt="" className="pic" src={item.get("imgUrl")} />
                                <ListInfo>
                                    <Link to='/detail'>
                                        <h3 className="title">{item.get("title")}</h3>
                                    </Link>
                                    <p className="desc">{item.get("desc")}</p>
                                </ListInfo>
                            </ListItem>
                        );
                    })
                }
                <LoadMore onClick={() => {loadMoreList(page)}}>加载更多</LoadMore>
            </div>
        );
    }
}
const mapStateToProps = (state) => ({
    list: state.getIn(["home", "articleList"]),
    page: state.getIn(["home", "page"])
});
const mapDispatchToProps = (dispatch) => ({
    loadMoreList(page) {
        const action = actionCreators.getMoreArticle(page);
        dispatch(action);
    }
});
export default connect(mapStateToProps, mapDispatchToProps)(List);